<template>
    <el-card class="stat-card" :style="{ borderColor: color }">
      <div class="card-content">
        <div class="icon-wrapper" :style="{ backgroundColor: color + '20' }">
          <el-icon :color="color" :size="28">
            <component :is="icon" />
          </el-icon>
        </div>
        <div class="stats">
          <div class="title">{{ title }}</div>
          <div class="value" :style="{ color: color }">{{ value }}</div>
        </div>
      </div>
    </el-card>
  </template>
  
  <script setup lang="ts">
  defineProps({
    title: {
      type: String,
      required: true
    },
    value: {
      type: Number,
      required: true
    },
    icon: {
      type: String,
      required: true
    },
    color: {
      type: String,
      default: '#409EFF'
    }
  })
  </script>
  
  <style lang="scss" scoped>
  .stat-card {
    margin-bottom: 20px;
    border-left: 4px solid;
  
    :deep(.el-card__body) {
      padding: 16px;
    }
  
    .card-content {
      display: flex;
      align-items: center;
      gap: 16px;
  
      .icon-wrapper {
        padding: 12px;
        border-radius: 8px;
        display: flex;
        align-items: center;
      }
  
      .stats {
        .title {
          color: #909399;
          font-size: 14px;
          margin-bottom: 4px;
        }
  
        .value {
          font-size: 24px;
          font-weight: 600;
        }
      }
    }
  }
  </style>